<template>
    <section>
        <tinymce-editor
            :id="domId"
            v-model="myContent"
            :init="init"
        ></tinymce-editor>
    </section>
</template>

<script>
import tinymce from "tinymce/tinymce";
import tinymceEditor from "@tinymce/tinymce-vue";

import "tinymce/themes/silver";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/fullscreen"; // 全屏插件
import "tinymce/plugins/preview"; // 预览插件
import "tinymce/plugins/code"; // 查看源代码
import "tinymce/plugins/autosave"; // 自动存稿
import "tinymce/plugins/link"; // 超链接
import "tinymce/plugins/codesample"; // 代码
require("P/static/tinymce/plugins/indent2em"); // 手动下载插件-缩进
require("P/static/tinymce/plugins/lineheight"); // 手动下载插件-行高

import Utils from "@/global/utils";
import Axios from "@/global/request/axios";
import Config from "@/global/config";
import * as qiniu from "qiniu-js";

export default {
    name: "Tinymce",
    components: {
        tinymceEditor,
    },
    props: {
        // v-model 实现方式
        value: {
            type: String,
            default: "",
        },
        content: {
            type: String,
        },
        config: {
            type: Object,
            default: Function,
        },
    },
    data() {
        return {
            domId: "J-tinymce" + Math.ceil(Math.random() * 10000),
            myContent: this.content,
            init: {},
            myConfig: {
                base_url: "static/tinymce", // 定义公用路径
                auto_focus: false,
                language_url: "static/tinymce/langs/zh_CN.js",
                language: "zh_CN",
                skin_url: "static/tinymce/skins/ui/oxide", // skin路径，注意这个，很多网上教程都是skins/oxide、oxide-dark，但是发现其实并没有这个玩意儿
                height: 900, // 编辑器高度
                plugins:
                    "code lists image media table wordcount preview autosave link indent2em lineheight codesample fullscreen",
                toolbar:
                    "code | undo redo | formatselect | fontselect | fontsizeselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | indent2em lineheight | lists image table | removeformat link | codesample | restoredraft | preview | fullscreen",
                branding: false, // 是否禁用“Powered by TinyMCE”
                menubar: false, // 顶部菜单栏显示
                convert_urls: false, // 禁止自动转换

                // FontSelect
                font_formats: `
                        微软雅黑=微软雅黑;
                        宋体=宋体;
                        黑体=黑体;
                        仿宋=仿宋;
                        楷体=楷体;
                        隶书=隶书;
                        幼圆=幼圆;
                        Andale Mono=andale mono,times;
                        Arial=arial, helvetica,
                        sans-serif;
                        Arial Black=arial black, avant garde;
                        Book Antiqua=book antiqua,palatino;
                        Comic Sans MS=comic sans ms,sans-serif;
                        Courier New=courier new,courier;
                        Georgia=georgia,palatino;
                        Helvetica=helvetica;
                        Impact=impact,chicago;
                        Symbol=symbol;
                        Tahoma=tahoma,arial,helvetica,sans-serif;
                        Terminal=terminal,monaco;
                        Times New Roman=times new roman,times;
                        Trebuchet MS=trebuchet ms,geneva;
                        Verdana=verdana,geneva;
                        Webdings=webdings;
                        Wingdings=wingdings,zapf dingbats`,

                // 自定义文件上传回调，支持图片、视频
                file_picker_callback(callback, value, meta) {

                    if (meta.filetype === "image") {
                        // 创建一个隐藏的type=file的文件选择input
                        let input = document.createElement("input");
                        input.setAttribute("type", "file");

                        // 打开上传弹窗
                        input.click();

                        input.onchange = function () {
                            let file = this.files[0]; // 只选取第一个文件。如果要选取全部，后面注意做修改

                            Utils.validateImg(file).then((status) => {
                                if (status) {
                                    Axios.get(Config.upload.uploadToken).then(
                                        (res) => {
                                            let key = Date.now() + "_" + file.name;
                                            let token = res.data.uploadToken;
                                            let domain = res.data.domain;
                                            let config = { useCdnDomain: true, region: null };
                                            let putExtra = { fname: "", params: {}, mimeType: [] };

                                            let observable = qiniu.upload( file, key, token, putExtra, config );

                                            observable.subscribe({
                                                next() {},
                                                error() {},
                                                complete(data) {
                                                    let image_url = "http://" + domain + "/" + data.key;
                                                    let url = Utils.splicingImageUrl(image_url);

                                                    callback(url)
                                                },
                                            });
                                        }
                                    );
                                }
                            });
                        };
                    } else if (meta.filetype === 'media') {}
                },
            },
        };
    },
    created() {
        this.init = Object.assign(this.myConfig, this.config);
    },
    watch: {
        value(value) {
            this.myContent = value;
        },
        myContent(value) {
            this.$emit("input", value);
        },
    },
};
</script>

<style>
.tox-silver-sink {
    z-index: 9999 !important;
}
</style>